<!--
*  功能描述：客户高级查询
 -->
 <template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-descriptions title="请选择查询条件" border>
        </el-descriptions>
        <el-checkbox v-model="cuid">客户编号</el-checkbox>
        <el-checkbox v-model="cuname">客户名称</el-checkbox>
        <el-checkbox v-model="cuphone">联系人</el-checkbox>
        <el-checkbox v-model="edtyid">客户类型</el-checkbox>
        <el-checkbox v-model="edinid">所属行业</el-checkbox>
      </el-col>
      <el-col :span="24">
        <el-descriptions title="客户查询条件" border>
        </el-descriptions>
        <el-form :inline="true" class="demo-form-inline">
          <v-show v-if="cuid">
            <el-form-item label="客户编号">
              <el-input v-model="CustId" placeholder="客户编号"></el-input>
            </el-form-item>
          </v-show>
          <v-show v-if="cuname">
            <el-form-item label="客户名称">
              <el-input v-model="CustName" placeholder="客户名称"></el-input>
            </el-form-item>
          </v-show>

          <v-show v-if="cuphone">
            <el-form-item label="联系人">
              <el-input v-model="CustPhones" placeholder="联系人"></el-input>
            </el-form-item>
          </v-show>

          <v-show v-if="edtyid">
            <el-form-item label="客户类型">
              <el-select v-model="EdTypeId" placeholder="请选择">
                <el-option v-for="item in ClientType" :key="item.DicId" :label="item.DicName" :value="item.DicId">
                </el-option>
              </el-select>
            </el-form-item>
          </v-show>
          <v-show v-if="edinid">
            <el-form-item label="所属行业">
              <el-select v-model="EdIndustryId" placeholder="请选择">
                <el-option v-for="item in industry" :key="item.DicId" :label="item.DicName" :value="item.DicId">
                </el-option>
              </el-select>
            </el-form-item>
          </v-show>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="info" @click="loadExcel">导出</el-button>
          </el-form-item>
        </el-form>
        <el-descriptions title="客户信息" border>
        </el-descriptions>
      </el-col>
      <el-col :span="24">
        <div>

          <el-table ref="multipleTable" :data="tableData" style="width: 100%">

            <el-table-column prop="CustId" label="编号">
            </el-table-column>
            <el-table-column prop="CustName" label="客户名称">
            </el-table-column>
            <el-table-column prop="CustEmail" label="邮政编码">
            </el-table-column>
            <el-table-column prop="CustPhone" label="公司电话">
            </el-table-column>
            <el-table-column prop="CustAbbreviation" label="客户简称">
            </el-table-column>
            <el-table-column prop="CustAddress" label="公司地址">
            </el-table-column>
            <el-table-column prop="CustPhones" label="联系人">
            </el-table-column>
            <el-table-column prop="CustFaxNumber" label="传真号">
            </el-table-column>
            <el-table-column prop="EdCreateTime" label="录入时间">
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.CustId)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>

          </el-table>

        </div>
      </el-col>
      <el-col :span="24">

        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageIndex"
            :page-sizes="[5, 10, 15, 50]" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      CustId: '',
      CustName: '',
      CustPhones: '',
      EdTypeId: '',
      EdIndustryId: '',
      PageIndex: 1,
      PageSize: 5,
      ClientType: [],//客户类型
      industry: [],//所属行业
      totalCount: 50,
      cuid: false,
      cuname: false,
      cuphone: false,
      edtyid: false,
      edinid: false,

    }
  },
  methods: {
    showCustList () {//显示
      this.$http({
        url: 'CustInfoList/GetCustomerExtendedDto',
        method: 'get',
        params: {
          CustId: this.CustId,
          CustName: this.CustName,
          CustPhones: this.CustPhones,
          EdTypeId: this.EdTypeId,
          EdIndustryId: this.EdIndustryId,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize,
        }
      })
        .then(res => {
          this.tableData = res.data.list
          this.totalCount = res.data.totalCount
          console.log(res.data)
        })
    },
    handleSizeChange (val) {
      this.PageSize = val;
      this.showCustList();
    },
    handleCurrentChange (val) {
      this.PageIndex = val;
      this.showCustList();
    },

    showTypes () {//客户类型
      this.$http({
        url: 'CustInfo/GetTypes',
        method: 'get',
      })
        .then(res => {
          this.ClientType = res.data
        })
    },
    showIndustry () {//所属行业
      this.$http({
        url: 'CustInfo/GetIndustry',
        method: 'get',
      })
        .then(res => {
          this.industry = res.data
        })
    },
    //导出excel
    loadExcel () {
      if (confirm("是否确定下载")) {
        window.open("CustInfoList/DownloadExcel")
      }
    },
    handleClick (id) {//查看
      this.$router.push({
        path: '/CustInfoEdit',
        name: 'CustInfoEdit',
        params: {
          id: id
        }
      })
    },

    onSubmit () {//查询
      this.showCustList();
    },


  },
  mounted () {
    this.showCustList();
    this.showTypes();
    this.showIndustry();
  }

}
</script>

<style>
</style>